$(function () {
  renderClassBar();
  renderCampBar();
  renderCompanyBar();
  renderPlatoonBar();
  renderPersonalResults();
});

/**
 * 渲染班优秀率排行柱状图
 */
function renderClassBar() {
  var myChart = echarts.init(document.getElementById('classChart'));
  var myColor = ['#87e447', '#00e47f', '#00e494',
    '#3ee477', '#95e477', '#a6e477', '#b6db5e', '#d5db5e', '#e5bf61', '#f09365'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["一班", "二班", "三班", "四班", "五班", "六班", "七班", "八班", "九班", "十班"]
    },
    yAxis: {
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '优秀率',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 15,
        data: [85, 40, 36, 60, 85, 40, 36, 60, 85, 40]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染营成绩统计柱状图
 */
function renderCampBar() {
  var myChart = echarts.init(document.getElementById('campChart'));
  var myColor = ['#87e447', '#f4ef90', '#3ee477', '#00dafc'];
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 45,
      left: 50
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ["一营", "二营", "三营", "四营"]
    },
    yAxis: {
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '优秀率',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num]
            }
          }
        },
        barWidth: 25,
        data: [85, 40, 36, 60]
      },
      {
        name: '外框',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: '#013D79'
          }
        },
        barGap: '-100%',
        z: 0,
        barWidth: 25,
        data: [100, 100, 100, 100]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染连优秀率排行柱状图
 */
function renderCompanyBar() {
  var myChart = echarts.init(document.getElementById('companyChart'));
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 10,
      left: 50,
      right: 90
    },
    tooltip: {
      formatter: (params) => {
        return params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: [{
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      },
      type: 'value'
    }],
    yAxis: [{
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['五连', '四连', '三连', '二连', '一连']
    }],
    series: [{
      name: 'assist',
      type: 'bar',
      stack: '1',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      tooltip: {
        trigger: 'none'
      },
      data: [2, 2, 2, 2, 2]
    }, {
      name: '优秀率',
      type: 'bar',
      stack: '1',
      barWidth: 13,
      label: {
        show: true,
        position: 'right', // 位置
        formatter: (params) => {
          return 'NO.' + params.data.sort
        },
        color: '#fff',
        fontSize: 12,
        distance: 5 // 距离
      },
      itemStyle: {
        barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          '#005271', '#36fdd8'
        ].map((color, offset) => ({
          color,
          offset
        }))), // 渐变
      },
      data: [
        {
          value: 65,
          sort: 5
        },
        {
          value: 70,
          sort: 4
        },
        {
          value: 75,
          sort: 3
        },
        {
          value: 80,
          sort: 2
        },
        {
          value: 85,
          sort: 1
        }
      ]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染排优秀率排行柱状图
 */
function renderPlatoonBar() {
  var myChart = echarts.init(document.getElementById('platoonChart'));
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 10,
      left: 50,
      right: 90
    },
    tooltip: {
      formatter: (params) => {
        return params.name + params.seriesName + ' : ' + params.value + '%';
      }
    },
    xAxis: [{
      name: '优秀率（%）',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        inside: true
      },
      splitLine: {
        show: false
      },
      type: 'value'
    }],
    yAxis: [{
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['五排', '四排', '三排', '二排', '一排']
    }],
    series: [ {
      name: '优秀率',
      type: 'bar',
      stack: '1',
      barWidth: 13,
      label: {
        show: true,
        position: 'right', // 位置
        formatter: (params) => {
          return 'NO.' + params.data.sort
        },
        color: '#fff',
        fontSize: 12,
        distance: 5 // 距离
      },
      itemStyle: {
        barBorderRadius: [20, 20, 20, 20], // 圆角（左上、右上、右下、左下）
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          '#2b4b5b', '#d5db5e'
        ].map((color, offset) => ({
          color,
          offset
        }))), // 渐变
      },
      data: [
        {
          value: 65,
          sort: 5
        },
        {
          value: 70,
          sort: 4
        },
        {
          value: 75,
          sort: 3
        },
        {
          value: 80,
          sort: 2
        },
        {
          value: 85,
          sort: 1
        }
      ]
    }]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}


// 个人成绩
function renderPersonalResults() {
  var personalResults = [
    {
      name: '张一',
      value: 98
    },
    {
      name: '张二',
      value: 96
    },
    {
      name: '张三',
      value: 93
    },
    {
      name: '张四',
      value: 92
    },
    {
      name: '张五',
      value: 91
    },
    {
      name: '张六',
      value: 90
    },
    {
      name: '张七',
      value: 88
    },
    {
      name: '张八',
      value: 86
    },
    {
      name: '张九',
      value: 85
    },
    {
      name: '张十',
      value: 85
    },
  ]
  str = "";
  $.each(personalResults ,function (index,item) {
      // console.log(values);
      str += "<div style=\"flex:1;display:flex;\">" +
               "<div class=\"rank rank"+index+"\" style=\"flex:1;\">" +
                (index+1)+
               "</div>" +
               "<div class=\"name\" style=\"flex:1;\">" +
                  item.name+
               "</div>" +
             "</div>"
  });
  $("#personalLeft").prepend(str);

  var personalBar = echarts.init(document.getElementById('personalBar'));
  
  var personalOption = {
            grid: {   // 直角坐标系内绘图网格
              left: '10%',  //grid 组件离容器左侧的距离
              top: '0%',
              right: '35%',
              bottom: '0%',
              containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
              // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
              //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
            },
            xAxis: {  //直角坐标系grid中的x轴,
              //一般情况下单个grid组件最多只能放上下两个x轴,
              //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
              type: 'value',//坐标轴类型,分别有：
                            //'value'-数值轴；'category'-类目轴;
                            //'time'-时间轴;'log'-对数轴
              splitLine: {show: false},//坐标轴在 grid 区域中的分隔线
              axisLabel: {show: false},//坐标轴刻度标签
              axisTick: {show: false},//坐标轴刻度
              axisLine: {show: false},//坐标轴轴线
            },
            yAxis: {
              type: 'category',
              axisTick: {show: false},
              axisLine: {show: false},
              axisLabel: {
                color: '#bcbcbc',
                fontSize: 10
              },
            },
            series: [{
              name: '进度条',
              type: 'bar',
              z: 1,
              barWidth: 8,//柱条的宽度,默认自适应
              data: personalResults.sort(function (a, b) { return a.value- b.value; }),
              itemStyle: {
                normal: {
                  barBorderRadius: 10,             
                  color: function (params) {
                    var myColor = ['#00dafc','#00dafc','#00dafc','#00dafc','#00dafc','#00dafc','#00dafc','#e8eb4c', '#f7c851', '#ffb464'];
                    var num = myColor.length;
                    return myColor[params.dataIndex]
                  }
                }
              }
            }, {
              name: '进度条背景',
              type: 'bar',
              z: 0,
              //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
              //如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用
              barGap: '-100%',
              barWidth: 8,
              data: [100, 100, 100, 100,100,100, 100, 100, 100,100],
              label: { //图形上的文本标签
                show: true,
                position: 'right',//标签的位置
                formatter: function (params) {
                  for (var i = 0; i < personalOption.series[0].data.length; i++) {
                    if (i === params.dataIndex) {
                      return (personalOption.series[0].data[i].value/100)*100+"%"
                    }
                  }
                },
                color: '#33F3FC',//标签字体颜色
                fontSize: 12 //标签字号
              },
              color: '#013D79',//柱条颜色
              itemStyle: {
                normal: {
                  barBorderRadius: 10
                }
              }
            }]
          }

  personalBar.setOption(personalOption);
}

// 旅优良率
var troopsChart = Highcharts.chart('troopsChart', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 75, // 倾斜角度
      beta: 0
    },
    height: 350, // 图高度
    backgroundColor: null
  },
  title: {
    text: null
  },
  credits: {
    enabled: false // 禁用版权信息
  },
  colors: ['#00b3e4','#ffbf2b', '#ff646b', '#9bce41'],
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      size: 250,
      allowPointSelect: true,
      cursor: 'pointer',
      depth: 55, // 厚度
      dataLabels: {
        enabled: true,
        format: '{point.name}<br/><br/>{y}人',
        style: {
          color: '#fff',
          fontSize: '16px'
        }
      },
      startAngle: 270,
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.2lf}%</b><br/>',
        valueSuffix: '%',
      }
    }
  },
  series: [{
    type: 'pie',
    name: '旅优良率',
    data: [
      {
        name: '优秀',
        y: 3500,
        h: 20
      },
      {
        name: '合格',
        y: 1200,
        h: 20
      },
      {
        name: '不合格',
        y: 202,
        h: 20
      },
      {
        name: '良好',
        y: 2600,
        h: 20
      }
    ]
  }]
});